<template>
  <div class="picking zy-content">
<!--    <div class="detail_box">-->
<!--      <template v-if="sucessStatus">-->
<!--        <div class="detail_content">-->
<!--          <div class="search_box">-->
<!--            <Row>-->
<!--              <Col span="10">-->
<!--                <div class="box_left">-->
<!--              <span class="imgbox">-->
<!--                <img src="@/assets/imgs/maintenance/xiezhubaoyang.png" alt=""/>-->
<!--              </span>-->
<!--                  <span class="text">{{$t('maintenance.Supportedby')}}</span>-->
<!--                </div>-->
<!--              </Col>-->
<!--              <Col span="14">-->
<!--                <div class="box_right">-->
<!--                  <Input-->
<!--                      :disabled="Number(status) !== 1 && Number(status) !== 2"-->
<!--                      @input="serachInput"-->
<!--                      v-model="assistMaintainBy"-->
<!--                      placeholder="请输入名字" />-->
<!--                </div>-->
<!--              </Col>-->
<!--            </Row>-->
<!--          </div>-->
<!--          <div class="detail_list" v-if="listObj.items">-->
<!--            <div class="list_box">-->
<!--              <Row>-->
<!--                <Collapse v-model="collaspeName" @on-change="collapseChange">-->
<!--                  <template v-for="(item,i) in listObj.items">-->
<!--                      <Panel :name="String(i)">-->
<!--                        <div class="item_col panel_item">-->
<!--                          <span class="title">-->
<!--                             <Tooltip :content="item.itemProject" placement="top" max-width="200">-->
<!--                                     <span style="width: 200px; height: 25px; display: inline-block; overflow: hidden;">{{item.itemProject}}</span>-->
<!--                                </Tooltip>-->
<!--                          </span>-->
<!--                          <div-->
<!--                              :class="[-->
<!--                     {'tag_zheng': Number(item.resultStatus) === 1},-->
<!--                     {'tag_yi': Number(item.resultStatus) === 2},-->
<!--                     {'tag_wu': !item.resultStatus},'tag']"-->
<!--                          >-->
<!--                            <div class="tag_list">-->
<!--                    <span class="imgBox" v-if="item.resultStatus">-->
<!--                      <img :src="Number(item.resultStatus) === 1 ? zhengImgUrl : yiImgUrl" alt=""/>-->
<!--                    </span>-->
<!--                              <span class="text">{{ item.resultStatus ? (Number(item.resultStatus) === 1 ? '保养结果正常' : '保养结果异常') : '暂未编辑保养' }}</span>-->
<!--                            </div>-->
<!--                          </div>-->
<!--                        </div>-->
<!--                        <div slot="content" :key="item.taskId" class="list_item">-->
<!--                          <Card>-->
<!--                            <div slot="title" class="card_title">-->
<!--                             基础信息-->
<!--                            </div>-->
<!--                            <div class="basic-info">-->
<!--                              <div class="basic-info-body">-->
<!--                                <Row style="border-top: 1px solid #eee">-->
<!--                                  <Col span="8">-->
<!--                                    <Row>-->
<!--                                      <Col class="basic-info-body-label" span="10">{{$t('maintenance.Bythetime')}}</Col>-->
<!--                                      <Col class="basic-info-body-item" span="14">{{item.taskEndTime}}</Col>-->
<!--                                    </Row>-->
<!--                                  </Col>-->
<!--                                  <Col span="8">-->
<!--                                    <Row>-->
<!--                                      <Col class="basic-info-body-label" span="10">{{$t('maintenance.MaintenanceItem')}}</Col>&lt;!&ndash;公司&ndash;&gt;-->
<!--                                      <Col class="basic-info-body-item" span="14">-->
<!--                                        <Tooltip :content="item.itemProject" placement="top" max-width="200">-->
<!--                                          <span style="width: 200px; height: 40px; display: inline-block; overflow: hidden;">{{item.itemProject}}</span>-->
<!--                                        </Tooltip>-->
<!--                                      </Col>-->
<!--                                    </Row>-->
<!--                                  </Col>-->
<!--                                  <Col span="8">-->
<!--                                    <Row>-->
<!--                                      <Col class="basic-info-body-label" span="10">{{$t('maintenance.MaintenanceMethod')}}</Col>-->
<!--                                      <Col class="basic-info-body-item" span="14">{{item.itemMethod}}</Col>-->
<!--                                    </Row>-->
<!--                                  </Col>-->
<!--                                </Row>-->
<!--                                <Row style="border-top: 1px solid #eee;">-->
<!--                                  <Col span="8">-->
<!--                                    <Row>-->
<!--                                      <Col class="basic-info-body-label" span="10">{{$t('maintenance.threshold')}}</Col>-->
<!--                                      <Col class="basic-info-body-item" span="14">-->
<!--                                        <template v-if="item.minValue && item.maxValue">{{`${item.minValue} - ${item.maxValue} 个` }}</template>-->
<!--                                        <template v-else>{{$t('maintenance.none')}}</template>-->
<!--                                      </Col>-->
<!--                                    </Row>-->
<!--                                  </Col>-->
<!--                                  <Col span="8">-->
<!--                                    <Row>-->
<!--                                      <Col class="basic-info-body-label" span="10">{{$t('maintenance.Result')}}</Col>-->
<!--                                      <Col class="basic-info-body-item" span="14">-->
<!--                                        <template v-if="!beconfirmed">-->
<!--                                          <RadioGroup v-model="item.resultStatus">-->
<!--                                            <Radio :label="1">正常</Radio>-->
<!--                                            <Radio :label="2">异常</Radio>-->
<!--                                          </RadioGroup>-->
<!--                                        </template>-->
<!--                                       <template v-else>-->
<!--                                         <template v-if="item.resultStatus">-->
<!--                                           {{item.resultStatus == 1 ? '正常' : '异常'}}-->
<!--                                         </template>-->
<!--                                         <template v-else>{{$t('maintenance.none')}}</template>-->
<!--                                       </template>-->
<!--                                      </Col>-->
<!--                                    </Row>-->
<!--                                  </Col>-->
<!--                                  <Col span="8">-->
<!--                                    <Row>-->
<!--                                      <Col class="basic-info-body-label" span="10">{{$t('maintenance.Record')}}</Col>-->
<!--                                      <Col class="basic-info-body-item" span="14">-->
<!--                                        <template v-if="!beconfirmed">-->
<!--&lt;!&ndash;                                          @on-change="assetsChange(item)"&ndash;&gt;-->
<!--                                          <Input v-model="item.resultValue"/>-->
<!--                                        </template>-->
<!--                                       <template v-else>-->
<!--                                         <template v-if="item.resultValue">{{item.resultValue}}</template>-->
<!--                                         <template v-else>{{$t('maintenance.none')}}</template>-->
<!--                                       </template>-->
<!--                                      </Col>-->
<!--                                    </Row>-->
<!--                                  </Col>-->
<!--                                </Row>-->
<!--                                <Row style="border-top: 1px solid #eee;">-->
<!--                                  <Col span="8" style="border-bottom: 1px solid #eee;">-->
<!--                                    <Row>-->
<!--                                      <Col class="basic-info-body-label videolabel" span="10">{{$t('maintenance.Video')}}</Col>-->
<!--                                      <Col class="videobody" span="14">-->
<!--                                        <div class="videoListbox">-->
<!--                                          <template v-if="!beconfirmed">-->
<!--                                            <div class="videoList">-->
<!--                                              <template v-for="(file,index) in item.attachments">-->
<!--                                                <div class="itemCol">-->
<!--                                                  <van-badge>-->
<!--                                                  <template>-->
<!--                                                  <span class="item" @click="previewClicjk(file,index,item)">-->
<!--                                                  <template v-if="!file.filepath.includes('video')">-->
<!--                                                  <img :src="util.filePathToUrl(file.filepath)" alt=""/>-->
<!--                                                  </template>-->
<!--                                                  <template v-else>-->
<!--                                                  <video preload="auto" loop autoplay muted>-->
<!--                                                  <source :src="util.filePathToUrl(file.filepath)" type="video/mp4">-->
<!--                                                  </video>-->
<!--                                                  </template>-->
<!--                                                  </span>-->
<!--                                                  </template>-->
<!--                                                    <template #content>-->
<!--                                                      <van-icon @click="delFujian(file,item)" name="cross" class="badge-icon" />-->
<!--                                                    </template>-->
<!--                                                  </van-badge>-->
<!--                                                </div>-->
<!--                                              </template>-->
<!--                                              <div class="itemCol videoCol"  @click="fileClick(item)">-->
<!--                                                <van-uploader-->
<!--                                                    v-model="fileListArr"-->
<!--                                                    accept="*"-->
<!--                                                    :after-read="afterRead"-->
<!--                                                >-->
<!--                                                  <template #preview-cover="{ file }">-->
<!--                                                    <span class="text">{{$t('maintenance.New')}}</span>-->
<!--                                                  </template>-->
<!--                                                </van-uploader>-->
<!--                                              </div>-->
<!--                                            </div>-->
<!--                                          </template>-->
<!--                                          <template v-else>-->
<!--                                            <template v-if="item.attachments && item.attachments.length">-->
<!--                                              <div class="itemCol" v-for="(list,index) in item.attachments">-->
<!--                                      <span class="item" @click="previewClicjk(list,index,item,'target')">-->
<!--                                      <template v-if="!list.filePath.includes('video')">-->
<!--                                        <img :src="util.filePathToUrl(list.filePath)" alt=""/>-->
<!--                                     </template>-->
<!--                                      <template v-else>-->
<!--                                         <video preload="auto" loop autoplay muted>-->
<!--                                         <source :src="util.filePathToUrl(list.filePath)" type="video/mp4">-->
<!--                                     </video>-->
<!--                                      </template>-->
<!--                                    </span>-->
<!--                                              </div>-->
<!--                                            </template>-->
<!--                                            <template v-else>-->
<!--                                              <span class="none">{{$t('maintenance.none')}}</span>-->
<!--                                            </template>-->
<!--                                          </template>-->
<!--                                        </div>-->
<!--                                      </Col>-->
<!--                                    </Row>-->
<!--                                  </Col>-->
<!--                                </Row>-->
<!--                              </div>-->
<!--                            </div>-->
<!--                          </Card>-->
<!--                          <Card>-->
<!--                            <div slot="title" class="card_title">-->
<!--                              使用工具-->
<!--                            </div>-->
<!--                           <div class="card_table">-->
<!--                             <Table stripe :columns="toolCloumns" :data="item.toolList">-->
<!--                               <template slot-scope="{row}" slot="action">-->
<!--                                 <span class="operationBtn">{{$t('common.Edit')}}</span>-->
<!--                                 <span class="operationBtn">{{$t('common.Delete')}}</span>-->
<!--                               </template>-->
<!--                             </Table>-->
<!--&lt;!&ndash;                             <div class="btn_box">&ndash;&gt;-->
<!--&lt;!&ndash;                               <span class="btn_add" @click="handleUseTools(item.toolList)">添加工具</span>&ndash;&gt;-->
<!--&lt;!&ndash;                             </div>&ndash;&gt;-->
<!--                           </div>-->
<!--                          </Card>-->
<!--                          <Card>-->
<!--                            <div slot="title" class="card_title">-->
<!--                              备件信息-->
<!--                            </div>-->
<!--                            <div class="card_table">-->
<!--                              <Table stripe :columns="materiaColumns" :data="item.materialList">-->
<!--                                <template slot-scope="{row}" slot="action">-->
<!--                                <template  v-if="!beconfirmed">-->
<!--                                  <span class="operationBtn" @click="materiaEdit(row)">{{$t('common.Edit')}}</span>-->
<!--                                  <span class="operationBtn" @click="deleteMaterion(row)">{{$t('common.Delete')}}</span>-->
<!--                                </template>-->
<!--                                  <template v-else>无</template>-->
<!--                                </template>-->
<!--                              </Table>-->
<!--                              <div class="btn_box" v-if="!beconfirmed">-->
<!--                                <span class="btn_add" @click="addSpareparts(item)">添加备件</span>-->
<!--                              </div>-->
<!--                            </div>-->
<!--                          </Card>-->
<!--&lt;!&ndash;                          <div class="btn_save">&ndash;&gt;-->
<!--&lt;!&ndash;                            <Button type="primary" @click="sumitClick(item)">保存</Button>&ndash;&gt;-->
<!--&lt;!&ndash;                          </div>&ndash;&gt;-->
<!--&lt;!&ndash;                          <div class="item_col">&ndash;&gt;-->
<!--&lt;!&ndash;                            <span class="colkey">{{$t('maintenance.Bythetime')}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                            <span class="colvalue">{{item.taskEndTime}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                          </div>&ndash;&gt;-->
<!--&lt;!&ndash;                          <div class="item_col">&ndash;&gt;-->
<!--&lt;!&ndash;                            <span class="colkey">{{$t('maintenance.MaintenanceItem')}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                            <span class="colvalue">{{item.itemProject}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                          </div>&ndash;&gt;-->
<!--&lt;!&ndash;                          <div class="item_col">&ndash;&gt;-->
<!--&lt;!&ndash;                            <span class="colkey">{{$t('maintenance.MaintenanceMethod')}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                            <span class="colvalue">{{item.itemMethod}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                          </div>&ndash;&gt;-->
<!--&lt;!&ndash;                          <div class="item_col">&ndash;&gt;-->
<!--&lt;!&ndash;                            <span class="colkey">{{$t('maintenance.usetools')}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                            <div class="colvalue" @click="checkusetool(item,'tools')">&ndash;&gt;-->
<!--&lt;!&ndash;                         <span>{{$t('maintenance.Query')}}&ndash;&gt;-->
<!--&lt;!&ndash;                      <van-badge color="#1989fa" :content="item.toolNum" max="99" /></span>&ndash;&gt;-->
<!--&lt;!&ndash;                              <van-icon name="arrow" />&ndash;&gt;-->
<!--&lt;!&ndash;                            </div>&ndash;&gt;-->
<!--&lt;!&ndash;                          </div>&ndash;&gt;-->
<!--&lt;!&ndash;                          <div class="item_col">&ndash;&gt;-->
<!--&lt;!&ndash;                            <span class="colkey">{{$t('maintenance.threshold')}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                            <span class="colvalue">&ndash;&gt;-->
<!--&lt;!&ndash;                  <template v-if="item.minValue && item.maxValue">{{`${item.minValue} - ${item.maxValue} 个` }}</template>&ndash;&gt;-->
<!--&lt;!&ndash;                  <template v-else>{{$t('maintenance.none')}}</template>&ndash;&gt;-->
<!--&lt;!&ndash;                </span>&ndash;&gt;-->
<!--&lt;!&ndash;                          </div>&ndash;&gt;-->
<!--&lt;!&ndash;                          <div class="item_col_btn">&ndash;&gt;-->
<!--&lt;!&ndash;                            <span class="btn rebtn" v-if="showStatus && !item.resultStatus && !beconfirmed" @click="checkusetool(item,'edit')">{{$t('maintenance.Edit')}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                            <span class="checkbtn rebtn" v-if="(Number(item.resultStatus) === 1 || Number(item.resultStatus) === 2) && reloadEdit" @click="checkusetool(item,'edit')">{{$t('maintenance.ReEdit')}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                            <span class="checkbtn rebtn" v-if="(!showStatus && !item.resultStatus) || beconfirmed || Number($route.query.status) === 3" @click="checkusetool(item,'edit')">{{$t('maintenance.Checkdetails')}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                          </div>&ndash;&gt;-->
<!--                        </div>-->
<!--                      </Panel>-->
<!--                  </template>-->
<!--                </Collapse>-->
<!--              </Row>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="noneList" v-else>-->
<!--                   <span class="img_box">-->
<!--                     <img src="@/assets/imgs/maintenance/nonelist.png"/>-->
<!--                   </span>-->
<!--            <span class="noneListText">{{$t('maintenance.noData')}}</span>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="box_footer">-->
<!--          <span class="btn" @click="cancleRetu">返回</span>-->
<!--          <span  v-if="showStatus" class="btn" @click="endBao">{{baoStr}}</span>-->
<!--        </div>-->
<!--      </template>-->
<!--      <template v-else>-->
<!--        <div class="erroBox">-->
<!--          <div class="erroBox_list">-->
<!--               <span class="imgBox">-->
<!--                <img src="@/assets/imgs/maintenance/shibai.png" alt="异常图"/>-->
<!--             </span>-->
<!--            <span class="text">{{$t('maintenance.abnormal')}}</span>-->
<!--            <span class="textOne">{{projectStr}}</span>-->
<!--            <span class="textTwo">结果存在异常,是否生成维修单</span>-->
<!--            <span class="btn" @click="weixiuClick">-->
<!--               {{$t('maintenance.maintenanceOrder')}}-->
<!--             </span>-->
<!--            <span class="btn" @click="sucessStatus = true">{{$t('maintenance.Cancle')}}</span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </template>-->
<!--    </div>-->
<!--    <Modal :mask-closable="false"-->
<!--        v-model="repairShow"-->
<!--        footer-hide-->
<!--        :mask-closable="false"-->
<!--        title="申请维修"-->
<!--    >-->
<!--      <repair v-if="repairShow" @cancleBack="cancleBack" :tarGetid="tarGetid"/>-->
<!--    </Modal>-->

<!--    <Modal :mask-closable="false"-->
<!--        v-model="sparelVisible"-->
<!--        width="640"-->
<!--        class="addModal modal-content-layout"-->
<!--        title="添加备件"-->
<!--    >-->
<!--      <div class="addProject">-->
<!--        <Form label-position="top">-->
<!--          <FormItem :label="$t('maintenance.SparePart')" required>-->
<!--            <template v-if="materiaStatus === 'add'">-->
<!--              <Select-->
<!--                  filterable-->
<!--                  clearable-->
<!--                  v-model="spareObj.materielNo"-->
<!--                  :remote-method="materielNoChange"-->
<!--                  @on-change="materieChange"-->
<!--              >-->
<!--                <Option v-for="item in spareObjList"-->
<!--                        :value="item.id"-->
<!--                        :label="item.materielNo + '-' + item.materielName "-->
<!--                        :key="item.id"/>-->
<!--              </Select>-->
<!--            </template>-->
<!--            <template v-else>-->
<!--              <Input class="inputWrapper" disabled-->
<!--                     v-model="spareObj.materielNo"/>-->
<!--            </template>-->
<!--          </FormItem>-->
<!--&lt;!&ndash;          <FormItem  :label="$t('maintenance.SpareNumber')" required>&ndash;&gt;-->
<!--&lt;!&ndash;            <Input class="inputWrapper" disabled&ndash;&gt;-->
<!--&lt;!&ndash;                   v-model="spareObj.materialCode"/>&ndash;&gt;-->
<!--&lt;!&ndash;          </FormItem>&ndash;&gt;-->
<!--          <FormItem  :label="$t('maintenance.SparePartsName')" required>-->
<!--            <Input class="inputWrapper" disabled-->
<!--                   v-model="spareObj.materialCode"/>-->
<!--          </FormItem>-->
<!--          <FormItem  :label="$t('maintenance.Specification')" required>-->
<!--            <Input class="inputWrapper" disabled-->
<!--                   v-model="spareObj.specification"/>-->
<!--          </FormItem>-->
<!--          <FormItem  :label="$t('spareParts.quantity')" required>-->
<!--            <InputNumber :min="1"-->
<!--                         :disabled="spareObj.numStatus"-->
<!--                         v-model="spareObj.num" />-->
<!--          </FormItem>-->
<!--&lt;!&ndash;          <FormItem  :label="$t('maintenance.unitprice')" required>&ndash;&gt;-->
<!--&lt;!&ndash;            <Input class="inputWrapper" disabled&ndash;&gt;-->
<!--&lt;!&ndash;                   v-model="spareObj.unitPrice"/>&ndash;&gt;-->
<!--&lt;!&ndash;          </FormItem>&ndash;&gt;-->
<!--        </Form>-->
<!--      </div>-->

<!--      <div slot="footer">-->
<!--        <Button type="default" @click="materiaClose">{{$t('common.Cancle')}}</Button>-->
<!--        <Button type="primary"  @click="materiaTableobj">{{$t('maintenance.Confirmed')}}</Button>-->
<!--      </div>-->
<!--    </Modal>-->

<!--    <Modal :mask-closable="false"-->
<!--        v-model="arrVisible"-->
<!--        width="640"-->
<!--        class="addModal modal-content-layout"-->
<!--        :title="$t('maintenance.AddTools')"-->
<!--    >-->
<!--      <div class="addProject">-->
<!--        <Form label-position="top">-->
<!--          <FormItem :label="$t('maintenance.Materialno')" required>-->
<!--            <Select-->
<!--                filterable-->
<!--                clearable-->
<!--                v-model="tablefrom.toolCode"-->
<!--                :remote-method="toolcodeChange"-->
<!--                @on-change="toolChange"-->
<!--            >-->
<!--              <Option v-for="item in toolList"-->
<!--                      :value="item.deviceMId"-->
<!--                      :label="item.deviceMId"-->
<!--                      :key="item.deviceMId"/>-->
<!--            </Select>-->
<!--          </FormItem>-->
<!--          <FormItem  :label="$t('maintenance.ToolName')" required>-->
<!--            <Input class="inputWrapper"-->
<!--                   v-model="tablefrom.toolName" clearable/>-->
<!--          </FormItem>-->
<!--          <FormItem  :label="$t('spareParts.quantity')" required>-->
<!--            <InputNumber :min="1"-->
<!--                         v-model="tablefrom.toolNum" />-->
<!--          </FormItem>-->
<!--          <FormItem :label="$t('maintenance.safekeeping')">-->
<!--            <Input class="inputWrapper"-->
<!--                   v-model="tablefrom.toolMode" clearable/>-->
<!--          </FormItem>-->
<!--        </Form>-->
<!--      </div>-->

<!--      <div slot="footer">-->
<!--        <Button type="default" @click="close">{{$t('common.Cancle')}}</Button>-->
<!--        <Button type="primary"  @click="addTableobj">{{$t('maintenance.Confirmed')}}</Button>-->
<!--      </div>-->
<!--    </Modal>-->
<!--    <gallery :images="galleryImages"-->
<!--             :options="gallyOptions"-->
<!--             :index="galleryIndex"-->
<!--             @close="galleryIndex = null"/>-->

    <checkDetail />
<!--      <div class="box_footer mt16">-->
<!--        <span class="btn" @click="cancleRetu">返回</span>-->
<!--        <span  v-if="showStatus" class="btn" @click="endBao">{{baoStr}}</span>-->
<!--      </div>-->
  </div>
</template>

<script>
import checkDetail from "@/views/devScene/maintain/management/checkDetail.vue";
import repair from "./repair";
import zhgengImg from '@/assets/imgs/maintenance/zhchangi.png'
import yiImg from '@/assets/imgs/maintenance/yichangi.png'
import { getListitems,fileUpload,delfileUpload,saveMaintence,addfileUpload,deleMaterielNo,enterMaintenance,getDatatools,checkMaterielNo } from '@/api/maintenance'
import {mapGetters} from "vuex";
import VueGallery from 'vue-gallery'

export default {
  name: "detatil",
  components:{
    // repair,
     checkDetail,
    'gallery': VueGallery
  },
  computed: {
    ...mapGetters([
      'datingObj',
      'maintainBy',
      'detailObj',
      'sumbitStatus',
    ])
  },
  data(){
    return{
      detailStatus:false,
      collaspeName:'0',
      fileListArr:[],
      fileList:[],
      tablefrom:{},
      spareObj:{},
      spareObjList:[],
      arrVisible:false,
      sparelVisible:false,
      materiaColumns:[
        {
          title: '备件料号',
          key: 'materielNo',
          align: 'center',
        },
        // {
        //   title: '备件编号',
        //   key: 'materialCode',
        //   align: 'center',
        // },
        {
          title: '备件品名',
          key: 'goodsName',
          align: 'center',
        },
        {
          title: '备件规格',
          key: 'specification',
          align: 'center',
        },
        {
          title: '数量',
          key: 'num',
          align: 'center',
        },
        // {
        //   title: '单价',
        //   key: 'unitPrice',
        //   align: 'center',
        // },
        // {
        //   title: '总金额',
        //   key: 'totalPrice',
        //   align: 'center',
        // },
        {
          title: `${ this.$t('common.operation') }`,
          key: 'action',
          align: 'center',
          slot: 'action'
        }
      ],
      toolCloumns:[
        {
          title: '工具物料号',
          key: 'toolCode',
          align: 'center',
        },
        {
          title: '工具名称',
          key: 'toolName',
          align: 'center',
        },
        {
          title: '数量',
          key: 'toolNum',
          align: 'center',
        },
        {
          title: '保养方式',
          key: 'toolMode',
          align: 'center',
        },
        // {
        //   title: `${ this.$t('common.operation') }`,
        //   key: 'action',
        //   align: 'center',
        //   slot: 'action'
        // }
      ],
      gallyOptions:{
        continuous: false,
      },
      materiaStatus:"",
      galleryIndex:null,
      toolsData:[],
      toolList:[],
      galleryImages:[],
      tarGetid:'',
      repairShow:false,
      baoStr:'',
      projectStr:'',
      sucessStatus:true,
      zhengImgUrl:zhgengImg,
      yiImgUrl:yiImg,
      assistMaintainBy:'',
      tarGetitemobj:{},
      checkDatil:{},
      listObj:{},
      totalNum:0,
      popupShow:false,
      offsetNumber:1,
      value:'',
      listArr:[],
      showStatus:true,
      beconfirmed:false,
      reloadEdit:false
    }
  },
  mounted() {
    // if (this.maintainBy){
    //     this.assistMaintainBy = this.maintainBy
    // }
    // this.getDataList()
    // this.$nextTick(()=>{
    //   this.baoStr = '完成保养'
    //   if(Number(this.datingObj.status) === 1 || Number(this.datingObj.status) === 2){
    //     this.reloadEdit = true
    //   }
    //   if (Number(this.datingObj.status) === 3){
    //     this.beconfirmed = true
    //     this.baoStr = '完成确认'
    //   }
    //   if (Number(this.datingObj.status) > 3){
    //     this.showStatus = false
    //   }else {
    //     this.showStatus = true
    //   }
    // })
  },
  methods:{
    async delFujian(item,obj){
      if (item.id){
        const params = {
          id:item.id
        }
        const {data} = await delfileUpload(params)
        if (data === '删除成功!'){
          obj.attachments = obj.attachments.filter(val=>val.filepath !== item.filepath)
          // this.fileList = this.fileList.filter(val=>val.filepath !== item.filepath)
          // const obj = this.detailObjClone.find(val=>val.itemId == this.$route.query.itemId)
          // obj.attachments = obj.attachments.filter(val=>val.filepath !== item.filepath)
          // this.$store.commit('detail/SET_DETAILOBJ',[...this.detailObjClone])
        }
      }else {
        // this.fileList = this.fileList.filter(val=>val.filepath !== item.filepath)
        obj.attachments = obj.attachments.filter(val=>val.filepath !== item.filepath)
      }
    },
    dataURLtoFileFun (dataurl, filename) {
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    fileClick(item){
      this.tarGetitemobj = item
    },
    afterRead(file, name) {
      if (!this.tarGetitemobj.itemId){
        return
      }
      if(file.file.type.indexOf('video') !== -1 || file.file.type.indexOf('image') !== -1){
        let formData = new FormData();
        formData.append("dir", 'device')
        if (file.file.type.indexOf('image') !== -1){
          formData.append("file", this.dataURLtoFileFun(file.content, "file.jpg"));
        }
        if (file.file.type.indexOf('video') !== -1){
          formData.append("file", this.dataURLtoFileFun(file.content, "file.video"));
        }
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        }
        fileUpload(formData,config).then(res => {
          if (res.code == 200) {
            res.data.itemId = this.$route.query.itemId
            res.data.taskId = this.$route.query.taskId
            if (this.tarGetitemobj.attachments && this.tarGetitemobj.attachments.length){
               this.tarGetitemobj.attachments = this.tarGetitemobj.attachments.concat([res.data])
            }else {
               this.tarGetitemobj.attachments.push(res.data)
            }
            if (this.tarGetitemobj.attachments && this.tarGetitemobj.attachments.length){
              const data = this.tarGetitemobj.attachments.map(val=>({
                itemId:val.itemId,
                taskId:val.taskId,
                fileName:val.fileName,
                filePath:val.filepath,
                fileUrl:val.fileUrl
              }))
              addfileUpload(data)
            }
            // this.fileList.push(res.data)
            // const obj = this.detailObjClone.find(val=>val.itemId == this.$route.query.itemId)
            // obj.attachments = this.fileList
            // this.$store.commit('detail/SET_DETAILOBJ',[...this.detailObjClone])
          }
        })
      }else{
        this.$Message.error('只能上传视频/图片')
      }
    },
    sumitClick(obj){
      this.$store.commit('detail/SET_DETAILOBJ',[obj])
    },
    // assetsChange(obj) {
    //   if (!obj.resultValue){
    //     this.$set(obj,'resultStatus','')
    //     return
    //   }
    //   if (obj.resultValue >= Number(obj.minValue) && obj.resultValue <= Number(obj.maxValue)){
    //     this.$set(obj,'resultStatus',1)
    //   }else {
    //     this.$set(obj,'resultStatus',2)
    //   }
    // },
    debounceSerach(fn, delay){
      let _this = this
      return function f(...args) {
        if (_this.timeID) {
          clearTimeout(_this.timeID);
        }
        _this.timeID = setTimeout(() => {
          fn(args);
        }, delay);
      };
    },
    close(){
      this.arrVisible = false
    },
    handleUseTools(tableData) {
      this.toolsData  = tableData
      this.arrVisible = true
      this.tablefrom = {
        toolNum:0
      }
    },
    addTableobj(){
      if (!this.tablefrom.toolCode){
        this.$Message.error(({content:'请填写工具物料号!',duration:3,closable:true}));
        return;
      }
      if (!this.tablefrom.toolName){
        this.$Message.error(({content:'请填写工具名称!',duration:3,closable:true}));
        return;
      }
      if (!this.tablefrom.toolNum){
        this.$Message.error(({content:'请填写数量!',duration:3,closable:true}));
        return;
      }
      const flag = this.toolsData.some(val=>val.toolName === this.tablefrom.toolName)
      if (flag){
        this.$Message.error(({content:'该工具已添加',duration:3,closable:true}));
        return
      }
      this.toolsData.push(this.tablefrom)
      this.arrVisible = false
    },
    toolChange(val){
      if (!val){
        return
      }
      const obj = this.toolList.find(item=>item.deviceMId == val)
      if (obj){
        this.tablefrom = {
          isEdit:false,
          toolCode:obj.deviceMId,
          toolName:obj.deviceName,
          toolNum:this.tablefrom.toolNum
        }
      }
    },
    toolcodeChange(val){
      if (!val){
        return
      }
      const fn = this.debounceSerach(()=>{
        const params = {
          deviceNo: val
        }
        this.axios({
          method: 'get',
          url: '/dms/dcmMaintainItem/getTzDetailByDeviceEq',
          params
        }).then(res => {
          if (res.code === 200) {
            if (res.data) {
              this.toolList = res.data
            }
          } else {
            this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
          }
        })
      },360)
      fn()
    },
    materielNoChange(val) {
      if (!val){
        return
      }
      const fn = this.debounceSerach(()=>{
        this.spareObjList = []
        const obj = {
          text:val,
          deviceMId:this.$route.query.deviceMId
        }
        this.axios({
          method: "post",
          url:'/dms/dmsBom/queryByDeviceTypeAndDeviceName',
          data: {
            ...obj
          },
        }).then(res=>{
          if (res.data && res.data.length){
           res.data.forEach(val=>{
             val.materialCode = val.materielName
             if (val.quantity){
               val.num = val.quantity
             }else {
               val.num = 1
             }
            })
            this.spareObjList = res.data
          }
        })
      },360)
      fn()
    },
    materiaTableobj(){
      const data = {
        materielNo:this.spareObj.materielNo,
        // materialCode:this.spareObj.materialCode,
        goodsName:this.spareObj.materialCode,
        specification:this.spareObj.specification,
        num:this.spareObj.num,
        // unitPrice:this.spareObj.unitPrice
      }
      if (this.materiaStatus !== 'edit'){
        data.itemId = this.tarGetitemobj.itemId
        data.taskId = this.tarGetitemobj.taskId
        data.useOutInfoId = this.spareObj.id
      }else {
        data.useOutInfoId = this.spareObj.useOutInfoId
        data.id = this.spareObj.id
      }
      saveMaintence(data,this.materiaStatus).then(res=>{
        if (res.code == 200){
          const {itemId,taskId} = this.tarGetitemobj
          this.getDatalist(itemId,taskId,this.tarGetitemobj)
          this.materiaClose()
        }else {
          this.$Message.error(res.msg)
        }
      })
    },
    materieChange(val){
      if (!val){
        return
      }
      const obj = this.spareObjList.find(item=>item.id == val)
      if (obj){
        this.spareObj = {
          materialCode:obj.purchaseOrderNo,
          num:Number(obj.outNum),
          unitPrice:obj.purchasePrice,
          ...obj
        }
        this.spareObj.materielNo = obj.id
        if (obj.manageType == 1){
          this.spareObj.num =1
          this.spareObj.numStatus = true
        }
      }
      console.log(this.spareObj)
    },
    materiaClose(){
      this.sparelVisible = false
    },
    //删除备件
    deleteMaterion(item){
      const params = {
        itemId:item.itemId,
        taskId:item.taskId,
        id:item.id
      }
      deleMaterielNo(params).then(res=>{
        if (res.code == 200){
          const {itemId,taskId} = item
          this.getDatalist(itemId,taskId,item)
        }else {
          this.$Message.error(res.msg)
        }
      })
    },
    //编辑备件
    materiaEdit(row){
      this.spareObj = {
        materielNo:row.materielNo,
        materialCode:row.materialCode,
        goodsName:row.goodsName,
        specification:row.specification,
        num:Number(row.num),
        unitPrice:row.unitPrice,
        ...row
      }
      this.materiaStatus = 'edit'
      this.sparelVisible = true
    },
    //添加备件
    addSpareparts(obj){
      this.tarGetitemobj = obj
      this.spareObj = {
        num:0
      }
      this.materiaStatus = 'add'
      this.sparelVisible = true
    },
    //获取备件
    getDatalist(itemId,taskId,obj){
      getDatatools({ itemId,taskId }).then(res=>{
        this.$nextTick(()=>{
          if (res.data.toolList && res.data.toolList.length){
            this.$set(obj,'toolList',res.data.toolList)
          }
          if (res.data.materialList && res.data.materialList.length){
            this.$set(obj,'materialList',res.data.materialList)
          }
        })
      })
    },
    collapseChange(val){
      // if (val && val.length){
      //   this.collaspeName = val
      //   const obj  = this.listObj.items.find((item,i)=>val[0] == i)
      //   this.tarGetitemobj = obj
      //   const { itemId,taskId } = obj
      //   this.getDatalist(itemId,taskId,obj)
      // }
    },
    previewClicjk(item,index,obj,str){
      this.galleryIndex = index
      // let arr = []
      // if (str === 'target'){
      //   arr = obj.attachments
      // }else {
      //   arr = this.fileList
      // }
      this.galleryImages = obj.attachments.map(val=>{
        if(val.filepath.includes('video')){
          val.filetype = 'video/mp4'
        }
        if(val.filepath.includes('jpg')){
          val.filetype = 'image/jpeg'
        }
        return {
          type: val.filetype,
          href: this.util.filePathToUrl(val.filepath),
        }
      })
    },
    cancleRetu(){
      this.$router.replace('/maintenanceList')
      this.$store.commit('detail/SET_DETAILOBJ',[])
      this.$store.commit('detail/SET_SUMBITSTATUS',false)
      this.$store.commit('detail/SET_MAINBY','')
    },
    cancleBack(){
      this.repairShow = false
    },
    serachInput(val){
      this.$store.commit('detail/SET_MAINBY',val)
    },
    weixiuClick(){
      this.tarGetid = this.$route.query.deviceMId
      this.repairShow = true
      this.sumbitEnter(true)

      // const query = {
      //   deviceMId:this.$route.query.deviceMId
      // }
      // this.$router.push({
      //   path:'/faultRepair',
      //   query
      // })
    },
    checkusetool(obj,str){
      const query = {
        itemId:obj.itemId,
        taskId:obj.taskId,
        itemProject:obj.itemProject,
        orgId:this.$route.query.orgId,
        status:status
      }
      if (str === 'tools'){
        this.$router.push({
          path:'/checkusetools',
          query
        })
      }else {
        this.$router.push({
          path:'/detailinfo',
          query
        })
      }
      this.$store.commit('detail/SET_DETAILOBJ',[...this.listObj.items])
    },
    endBao(){
      if (!(this.listObj.items && this.listObj.items.length)){
          return;
       }
      const flag = this.listObj.items.every(val=>Number(val.resultStatus) === 1)
      const flagNull = this.listObj.items.some(val=>!val.resultStatus)
      if (!flag && Number(status) === 1 && Number(status) === 2){
        const arr = this.listObj.items.map(val=>{
          if (Number(val.resultStatus) === 2){
            return val.itemProject
          }
        })
        if (arr && arr.length && !flagNull){
          this.projectStr = arr.join(',')
          this.sucessStatus = false
        }else {
          this.$Message.info('请完善保养项目')
        }
        return
      }
      this.sumbitEnter()
    },
    sumbitEnter(flag){
      const data = {
        taskId:this.$route.query.taskId,
        assistMaintainBy:this.assistMaintainBy,
        results:[]
      }
      if (this.listObj.items && this.listObj.items.length){
        data.results = this.listObj.items.map(val=>({
          taskId:val.taskId,
          projectId:val.projectId,
          resultValue:val.resultValue,
          resultStatus:val.resultStatus
        }))
      }
      enterMaintenance(data).then(res=>{
        if (!flag){
          this.$router.push('/maintenanceList')
        }
        this.$store.commit('detail/SET_DETAILOBJ',[])
        this.$store.commit('detail/SET_SUMBITSTATUS',false)
        this.$store.commit('detail/SET_MAINBY','')
      })
    },
    async getDataList(){
      this.detailStatus = false
        const {
          // code,
          // deviceId,
          // deviceMId,
          // deviceName,
          // orgId,
          // status,
          taskId
        } = this.datingObj
       const {data} = await getListitems({
         // code,
         // deviceId,
         // deviceMId,
         // deviceName,
         // orgId,
         // status,
         taskId,
       })
       this.checkDatil = {...data}
       // this.$store.commit('detail/SET_DATING',obj)
       this.detailStatus = true
       this.listObj = data
      if (JSON.stringify(data) == '{}'){
         return
      }
      if (data.assistMaintainBy){
        this.assistMaintainBy = data.assistMaintainBy
      }
      // if (data){
      //   this.listObj.items.forEach(obj=>{
      //       const { itemId,taskId } = obj
      //       this.getDatalist(itemId,taskId,obj)
      //   })
      // }
      if (this.sumbitStatus){
        if (this.listObj.items && this.listObj.items.length && this.detailObj && this.detailObj.length){
          this.listObj.items.forEach(val=>{
            if (this.detailObj && this.detailObj.length){
                 this.detailObj.forEach(item=>{
                   if (val.itemId === item.itemId){
                     val.resultValue = item.resultValue
                     val.resultStatus = item.resultStatus
                   }
                 })
            }
          })
        }
      }
    },
    getArr(){
     console.log('拿数据')
    }
  }
}
</script>

<style scoped lang="scss">
@import "index.scss";
/deep/ .ivu-input-number{
  width: 100% !important;
}
.basic-info {
  //padding-bottom:20px;
  ::v-deep .ivu-select-selection {
    border: none;
  }

  .basic-info-title {
    span {
      display: inline-block;
      width: 7px;
      height: 24px;
      background: #187bdb;
    }

    h2 {
      display: inline-block;
      font-size: 16px;
      padding-left: 16px;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: -2px;
        width: 7px;
        height: 24px;
        background: #187bdb;
      }
    }
  }

  .basic-info-body {
    //margin: 15px 10px;
    color: #333;
    font-size: 13px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    border-left: 1px solid #eee;

    .editWrap {
      position: relative;

      .editTime {
        position: absolute;
        cursor: pointer;
        right: 10px;
        top: 0;
        color: #187bdb;
        font-size: 14px;

        .icon {
          font-size: 30px;
          vertical-align: middle;
        }
      }
    }

    .basic-info-body-label {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      background: #f5f6f7;
      text-align: right;
      padding-right: 10px;
      /*border-left: 1px solid #B6B7B7;*/
      /*border-top: 1px solid #B6B7B7;*/
      /*border-bottom: 1px solid #B6B7B7;*/
    }
     .videolabel,.videobody{
       height: 100px !important;
       line-height: 100px !important;
     }
    .videobody{
      padding: 0 !important;
    }
    .basic-info-body-item,.videobody{
      display: inline-block;
      height: 40px;
      line-height: 40px;
      text-align: left;
      padding: 0 10px;
      border-left: 1px solid #eee;
      border-right: 1px solid #eee;
      .videoListbox{
        width: 100%;
        line-height: 150px !important;
        height: 110px;
        //display: flex;
        //justify-content: flex-end;
        //align-items: center;
        .videoList{
          padding: 5px;
          width: 100%;
          height: 110px;
          overflow:hidden;
          white-space:nowrap;
          overflow-x: scroll;
          //display: flex;
          //justify-content: center;
          //align-items: center;
          .videoCol{
            position: relative;
            background: rgba(131,150,181,0.0800);
            border-radius: 4px;
            border: 1px dashed rgba(0,20,45,0.2000);
            display: inline-block;
            text-align: center;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            .van-uploader{
              position: absolute;
              top: 35%;
              left: 35%;
            }
            ::v-deep .van-uploader__preview{display: none;}
            ::v-deep .van-uploader__upload{
              //display: block;
              width: 100%;
              height: auto;
              margin: 0;
              .van-uploader__upload-icon{
                font-size: 30px;
              }
            }
            .videoImg{
              width: 28px;
              height: 24px;
              img{
                width: 100%;
                height: 100%;
              }
            }
            .text{
              padding-top: 20px;
              font-size: 12px;
              font-weight: 400;
              color: rgba(0,20,45,0.7000);
            }
          }
          .itemCol{
            height: 88px;
            width: 100px;
            display: inline-block;
            .van-badge__wrapper{
              width: 100%;
              height: 100%;
              .item{
                display: flex;
                border-radius: 4px;
                width: 100%;
                height: 100%;
                video{
                  width: 100%;
                  height: 100%;
                  object-fit:fill;
                }
                img{
                  width: 100%;
                  height: 100%;
                }
              }
            }
            ::v-deep .van-badge {
              display: flex;
              justify-content: center;
              align-items: center;
              box-sizing: border-box;
              width: 18px;
              height: 18px;
              background-color: #D32222;
            }
          }
        }
        .none{
          font-size: 14px;
          font-weight: 400;
          color: #00142D;
        }
        .itemCol{
          padding:3px;
          width: 50px;
          height: 40px;
          .item{
            //display: block;
            border-radius: 4px;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            video{
              width: 100%;
              height: 100%;
              object-fit:fill;
            }
            img{
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .preview {
        position: absolute;
        right: 10px;
        top: 0;
        width: 40px;
        height: 40px;
        background: #eee;

        .preview-img {
          width: 40px;
          height: 40px;
          overflow: hidden;
        }
      }

      ::v-deep .ivu-upload-drag {
        display: flex;
        height: 40px;

        button {
          margin-top: 4px;
        }
      }

      .fileWrap {
        flex: 1;
        display: flex;
        overflow-y: scroll;
        flex-direction: column;

        &::-webkit-scrollbar {
          width: 4px;
        }

      }

      .file-list {
        padding-left: 20px;
      }
    }
  }

  .file-style {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #187bdb;
    cursor: pointer;
  }
}
/deep/ .ivu-modal-body{
  //padding: 0;
}
/deep/ .ivu-modal{
  top: 50px !important;
}
</style>
